.tdesign-mobile-demo {
  background-color: var(--td-bg-color-container);
}

.avatar-demo {
  margin-left: 16px;
  margin-bottom: 16px;

  .custom {
    .t-avatar__inner {
      background-color: #0052d9;
      color: #fff;
    }
  }

  .avatar-example:not(:last-child) {
    margin-right: 32px;
  }

  .avatar-example--small:not(:last-child) {
    margin-right: 56px;
  }

  .avatar-example--medium:not(:last-child) {
    margin-right: 48px;
  }

  .avatar-example--large:not(:last-child) {
    margin-right: 32px;
  }

  .external-class-content {
    .t-avatar {
      color: #fff;
      background-color: #0052d9;
      font-weight: 400;
    }
  }
}

.avatar-group-demo {
  margin-left: 16px;
  margin-bottom: 16px;
}
